<template>
  <div>
    <div style="text-align: right">
      <v-btn color="primary" @click="addItem">新建</v-btn>
    </div>

    <v-data-table
      :headers="headers"
      :items="list"
      class="elevation-1"
      :total-items="total"
      :loading="loading"
      :pagination.sync="pagination"
    >
      <template v-slot:items="props">
        <td>
          <router-link :to="'/admin/article/'+props.item.id">
            {{ props.item.title }}
          </router-link>
        </td>
        <td>{{ props.item.ctime | formatDatetime}}</td>
        <td>{{ props.item.utime | formatDatetime}}</td>
        <td class="justify-center layout px-0">
          <v-icon
            small
            class="mr-2"
            @click="editItem(props.item)"
          >
            edit
          </v-icon>
          <v-icon
            small
            @click="deleteItem(props.item)"
          >
            delete
          </v-icon>
        </td>
      </template>
    </v-data-table>

  </div>

</template>
<script type="text/ecmascript-6">
  import {pageList, del} from "@/api/article";

  export default {
    data() {
      return {
        headers: [
          {
            text: '标题',
            sortable: false,
            value: 'title',
            width: '60%'
          },
          {text: '创建日期', value: 'ctime', sortable: false,},
          {text: '修改日期', value: 'utime', sortable: false,},
          {text: '操作', value: '', sortable: false,}
        ],
        list: [],
        loading: false,
        total: 0,
        pagination: {
          page: 1,
          rowsPerPage: 10
        },
        query: {}
      }
    },
    watch: {
      pagination: {
        handler() {
          this.getList();
        },
        deep: true
      }
    },
    beforeMount() {
      this.search();
    },
    methods: {
      addItem() {
        this.$router.push({path: '/admin/article/new'});
      },
      editItem(row) {
        this.$router.push({path: '/admin/article/' + row.id});
      },
      deleteItem(row) {
        del(row.id).then(() => {
          this.search();
        });
      },
      search() {
        this.pagination.page = 1;
        this.getList();
      },
      getList() {
        this.loading = true;
        this.query.page = this.pagination.page;
        this.query.size = this.pagination.rowsPerPage;
        pageList(this.query).then(data => {
          this.list = data.content;
          this.total = data.totalElements;
        }).finally(() => {
          this.loading = false;
        })
      }

    }

  }
</script>
